<template>
  <el-dialog title="任务详情" :visible.sync="show" width="1000px" @closed="closed">
    <div class="detail-content">
      <div class="subtitle">任务详情</div>
      <el-descriptions size="small" :label-style="{ width: '95px' }" :content-style="{ maxWidth: '250px' }" border>
        <el-descriptions-item label="任务名称">{{ info.taskName }}</el-descriptions-item>
        <el-descriptions-item label="巡更类型">{{ info.patrolTypeName }}</el-descriptions-item>
        <el-descriptions-item label="活动状态">
          <dict-tag :options="dict.type.cq_patrol_task_status" :value="info.status" />
        </el-descriptions-item>
        <el-descriptions-item label="任务开始时间">{{ info.taskBeginDate }}</el-descriptions-item>
        <el-descriptions-item label="任务结束时间">{{ info.taskEndDate }}</el-descriptions-item>
        <el-descriptions-item label="任务来源">
          <el-tag type="info" size="small" v-if="info.taskType" :style="{ color: displaySource('color', info.taskType) }">
            {{ displaySource('label', info.taskType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="涉及负责人" :span="3" :content-style="{ maxWidth: '100%' }">
          <div class="ellipsis2" :title="info.principalNames">{{ info.principalNames }}</div>
        </el-descriptions-item>
      </el-descriptions>

      <div class="flex-sb" style="margin-top: 20px">
        <div class="subtitle">巡更进度</div>
        <div style="margin-right: 20px">
          <el-link type="primary" @click="$refs.TaskRouteMap.open(info)">巡更路线</el-link>
        </div>
      </div>
      <el-collapse v-model="activeTaskSpots" class="task-spots">
        <el-collapse-item v-for="(item, index) in taskSpots" :key="index" :name="index">
          <div slot="title" class="task-spot_title">
            <div class="ellipsis" style="font-size: 16px">
              <i class="el-icon-location-information" style="margin-left: 10px" />
              <span style="margin-left: 5px">{{ item.spotCode }} / {{ item.spotName }}</span>
            </div>
            <div style="white-space: nowrap">
              <template v-for="(record, index2) in item.records">
                {{ record.spotBuilderName }}:
                <dict-tag :options="dict.type.cq_patrol_task_spot_status" :value="record.status" :key="index2" style="display: inline-block; margin-right: 15px" />
              </template>
            </div>
          </div>

          <el-empty description="暂未有负责人检查" v-if="!item.status" :image-size="100" style="padding: 10px 0" />
          <div class="inspections" v-else>
            <el-card class="item" body-style="padding-bottom: 0" v-for="(insp, index2) in item.inspections" :key="`${index}_${index2}`">
              <div slot="header" class="flex-sb" :class="{ pointer: insp.isProblem }" @click="openRectifications(insp)">
                <span class="ellipsis" :title="insp.showTitle" style="margin-right: 10px">{{ insp.showTitle }}</span>
                <div class="flex-y-center">
                  <dict-tag :options="dict.type.cq_route_inspection_status" :value="insp.status" style="margin-right: 10px" v-if="insp.isProblem" />
                  <dict-tag :options="inspectResultList" :value="insp.isProblem" />
                  <i class="el-icon-arrow-right" style="margin-left: 10px" v-if="insp.isProblem" />
                </div>
              </div>
              <el-descriptions size="small" :column="1" :label-style="{ whiteSpace: 'nowrap' }">
                <el-descriptions-item label="描述">{{ insp.description || '暂无描述' }}</el-descriptions-item>
                <el-descriptions-item label="现场情况">
                  <MediaList :list="insp.picList" />
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <TaskRouteMap ref="TaskRouteMap" />
    <InspectionInfo ref="InspectionInfo" />
  </el-dialog>
</template>
<script>
// 任务详情
import { getTaskByTaskId } from '@/api/cq/patrol'
import { taskSourceList } from '../utils/common'
import TaskRouteMap from './TaskRouteMap'
import InspectionInfo from './DailyInspectionInfo'
import MediaList from './MediaList'
const taskSource2obj = taskSourceList.reduce((o, i) => !void (o[i.value] = i) && o, {})
const displaySource = (key, value) => (taskSource2obj[value] || {})[key]
// 巡查结果。此处 label 不同
export const inspectResultList = [
  { label: '正常', value: '0', raw: { listClass: 'primary' } },
  { label: '异常', value: '1', raw: { listClass: 'danger' } }
]
export default {
  components: { TaskRouteMap, InspectionInfo, MediaList },
  dicts: ['cq_patrol_task_status', 'cq_patrol_task_spot_status', 'cq_route_inspection_status'],
  data() {
    return {
      displaySource,
      inspectResultList,
      show: false,
      info: {},
      taskSpotsLoading: false,
      taskSpots: [],
      activeTaskSpots: []
    }
  },
  methods: {
    closed() {
      this.info = {}
      this.taskSpots = []
      this.activeTaskSpots = []
    },
    open(data) {
      this.show = true
      this.info = data
      this.getTaskSpot()
    },
    async getTaskSpot() {
      const opt = { patTaskId: this.info.patTaskId }
      this.taskSpotsLoading = true
      const res = await getTaskByTaskId(opt).catch(() => false)
      this.taskSpotsLoading = false
      if (res === false) return

      const data = res.data || {}
      const spots = data.cqPatrolTaskSpotList || []
      spots.map(i => {
        i.records = i.cqPatrolCheckRecordList || []
        const inspections = i.gatherCqRouteInspectionList || []
        inspections.map(insp => {
          insp.picList = insp.picList || []

          const showTime = insp.createTime ? new Date(insp.createTime).Format('yyyy年MM月dd日 hh:mm:ss') : ''
          insp.showTitle = `${insp.spotBuilderName}${showTime ? ` - ${showTime}` : ''}`
        })
        i.inspections = inspections
      })
      this.taskSpots = spots
    },
    openRectifications(insp) {
      if (!insp.isProblem) return
      this.$refs.InspectionInfo.open({ inspectionId: insp.inspectionId })
    }
  }
}
</script>
<style lang="scss" scoped>
.ellipsis {
  cursor: unset;
}
.detail-content {
  min-height: 300px;
  max-height: calc(88vh - 100px);
  overflow-y: auto;
  margin-top: -20px;
}
.subtitle {
  font-weight: bold;
  padding-bottom: 15px;
}
.task-spots {
  /deep/ .el-collapse-item__header {
    background-color: #f5f7fa;
  }
}
.task-spot_title {
  width: calc(100% - 20px);
  display: flex;
  color: #606266;
}
.inspections {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  .item {
    width: calc((100% - 20px) / 2);
  }
}
</style>
